<template>
  <div style="width: 100%">
    <div v-if="besData !== null">
      <div class="video">
        <video width="100%" controls autoplay id="video" @ended="end()" @play="play()" @pause="pause()">
          <source :src="url" type="video/mp4" />
        </video>
      </div>
      <!-- 作者照片以及名字 -->
      <div class="artistsBox">
        <img :src="besData.creator.avatarUrl" alt="" />
        <div class="title">{{ besData.creator.nickname }}</div>
      </div>

      <div class="name">{{ besData.title }}</div>
      <div class="description">{{ besData.description }}</div>
      <div class="desc">
        <div style="margin-right: 10px">
          发布:{{ besData.publishTime | dateFormat }}
        </div>
        <div>
          播放:{{
              besData.playTime >= 10000
                ? (besData.playTime / 10000).toFixed(0) + "万"
                : besData.playTime
          }}
        </div>
      </div>

      <!-- 标签 -->
      <div class="tips">
        <el-tag v-for="item in besData.videoGroup" :key="item.id" type="info" effect="plain">
          {{ item.name }}
        </el-tag>
      </div>

      <!-- 点赞 收藏 分享  -->
      <div style="margin-top: 30px">
        <el-button size="medium" @click="like(besData.vid)"><i class="el-icon-thumb"></i> 点赞({{
            praisedCount
        }})</el-button>
        <el-button size="medium" @click="sub(besData.vid)"><i class="el-icon-folder-add"></i>{{ subText }} ({{
            subscribeCount
        }})</el-button>
        <el-button size="medium" @click="share(besData.vid)"><i class="el-icon-share"></i> 分享({{
            besData.shareCount
        }})</el-button>
      </div>

      <!----评论---->
      <div class="comment">
        <div class="titleBox">
          <div class="title2">评论</div>
          <div class="count">({{ besData.commentCount }})</div>
        </div>
        <Com />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  components: {
    Com: () => import('./comment.vue'),
  },
  computed: {
    ...mapState(['vUrl', 'vBes', 'nowPlaySong']),
  },
  watch: {
    // 基础信息
    vBes(newVal, oldVal) {
      //   if (localStorage.getItem("cookie") !== null) {
      //     this.ifSub(newVal.mvBes.data.id);
      //   }
      this.besData = newVal.vBes;
    },
    vUrl(newVal, oldVal) {
      this.url = newVal.vUrl;
      document.getElementById('video').load();
    },
  },
  mounted() {
    // 播放视频自动暂停音乐
    this.url = this.vUrl.vUrl;
    this.besData = this.vBes.vBes;
    this.praisedCount = this.besData.praisedCount
    this.subscribeCount = this.besData.subscribeCount
    document.getElementById('playMusicAudio').pause();
    if (localStorage.getItem('cookie') !== null) {
      this.ifSub(this.besData.vid);
    }
    // this.info(this.mvBes.mvBes.data.id);
  },
  data() {
    return {
      subText: '收藏',
      infoData: null,
      url: null,
      besData: null,
      praisedCount: 0,
      subscribeCount: 0,
    };
  },
  methods: {
    // 播放结束时,音乐开始播放
    end() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').play();
      }
    },

    // 播放开始时,音乐暂停
    play() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').pause();
      }
    },

    // 播放停止时,音乐开始
    pause() {
      if (this.nowPlaySong !== null) {
        document.getElementById('playMusicAudio').play();
      }
    },

    // 点赞
    async like(e) {
      if (localStorage.getItem('cookie') !== null) {
        this.$api
          .like({
            type: 5, // 点赞MV类型
            id: e,
            cookie: localStorage.getItem('cookie'),
          })
          .then((ret) => {
            if (ret.code === 200) {
              this.$message({
                message: '点赞成功',
                type: 'success',
              });
              this.praisedCount += 1
            }
          });
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 收藏
    async sub(e) {
      if (localStorage.getItem('cookie') !== null) {
        // 在收藏之前先判断一下是否收藏了
        if (this.subText === '已收藏') {
          // 取消收藏
          this.subVideo(e, 2);
          this.subscribeCount -= 1
        } else if (this.subText === '收藏') {
          // 收藏
          this.subVideo(e, 1);
          this.subscribeCount += 1
        }
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 分享
    async share(e) {
      this.$message.error('此功能暂未开发');
    },

    // 是否收藏
    async ifSub(e) {
      this.$api
        .subMvList({
          cookie: localStorage.getItem('cookie'),
          timestamp: this.$utils.timestamp(),
        })
        .then((ret) => {
          for (let i = 0; i < ret.data.length; i++) {
            if (ret.data[i].vid === e) {
              this.subText = '已收藏';
              break;
            } else {
              this.subText = '收藏';
            }
          }
        });
    },

    // 收藏视频
    async subVideo(e, t) {
      this.$api
        .subVideo({
          id: e,
          t,
          cookie: localStorage.getItem('cookie'),
        })
        .then((ret) => {
          if (ret.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
          }
          this.ifSub(e);
        });
    },
  },
};
</script>

<style scoped>
.video {
  width: 100%;
  margin-top: 20px;
}

img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}

.title {
  font-size: 20px;
  margin-left: 10px;
}

.artistsBox {
  display: flex;
  align-items: center;
  margin-top: 15px;
  cursor: pointer;
}

.name {
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
}

.desc {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.tips {
  margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
}

.el-button {
  width: 150px;
  border-radius: 20px;
  font-size: 15px;
}

.comment {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.titleBox {
  display: flex;
  align-items: center;
  justify-content: left;
}

.title2 {
  font-weight: 700;
  font-size: 20px;
}

.description {
  font-size: 20px;
  margin-top: 10px;
}
</style>
